<script setup>
import { watch, ref } from 'vue';
import { useRouter } from 'vue-router';
import { Random } from 'mockjs'

const router = useRouter()
const path_list = ref([])
watch(()=>router.currentRoute.value.currentRoute,()=>{
    const currentRouteNameList = []
    router.currentRoute.value.fullPath.split('/').filter((value)=>{ return value.trim() != '' }).forEach((value, index)=>{
        currentRouteNameList.push(currentRouteNameList.length !=0 ? currentRouteNameList.join('-') + '-' + value : value)
    })
    // console.log(currentRouteNameList)
    const currentRouteTextSet = new Set()
    // 遍历每一个路由 获取其中meta中的text值
    router.currentRoute.value.matched.forEach((value)=>{
        if(!value.name) {
            value.name = value.path.split('/').filter((value)=>{
                return value.trim() != ''
            }).join('-')
        }
        if(currentRouteNameList.includes(value.name)) {
            currentRouteTextSet.add(value.meta.text ?? value.name.split('-').map((value)=>Random.capitalize(value.trim())).join(''))
        }
    })
    // console.log(currentRouteTextSet)
    path_list.value = currentRouteTextSet.values()
}, {
    deep: true,
    immediate: true
})
</script> 

<template>
    <Breadcrumb>
        <template v-for="name,index in path_list" :key="index">
            <BreadcrumbItem>
                {{ name }}
            </BreadcrumbItem>
        </template>
    </Breadcrumb>
</template>